<template>
    <div class="login-container">
        <div class="login-box">
            <div class="avatar-box">
                <img src="../assets/vue.svg" alt="" class="avatar">
                <div class="form-login">
                    <div class="form-group">
                        <label for="username">登录名称：</label>
                        <input
                         type="text" name=""
                         id="username" 
                         class="form-control"
                         placeholder="请输入用户名"
                         autocomplete="off"
                         v-model.trim="username"/>
                    </div>
                    <div class="form-group">
                        <label for="password">登录密码：</label>
                        <input type="password" 
                        name="" id="password" 
                        class="form-control"
                        placeholder="请输入密码"
                        v-model.trim="password"    
                        />
                    </div>
                    <div class="form-group">
                        <button class="btn" type="button" @click="onLogin">登录</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
    import {useRouter} from 'vue-router'
    const router = useRouter()
    const username = ref('')
    const password = ref('')
    const onLogin = () => {
        if(username.value === 'zzy' && password.value === '123'){
            router.push('/home')
            return localStorage.setItem('token','Bearer xxx')
        }else{
            alert('111')
            localStorage.removeItem('token')
        }
    }
</script>
<style scoped>
    .avatar-box{
        background-color: rgb(247, 255, 232);
        height: 500px;
    }
    .avatar{
        width: 100px;
        height: 100px;
    }

    .form-login{
        height: 200px;
        width: 500px;
    }
    .form-group{
        margin-top: 20px;
    }
    .form-control{
        height: 30px;
    }
    .btn{
        border: 1px solid greenyellow;
    }
</style>